<template>
  <div>
    <h2>{{ msg }}</h2>
    <input v-model.number="count" />
    <p></p>
    <!-- computer 有缓存，数字不变时只执行1次，性能高 -->
    <div class="box">
      <h4>使用computer 属性</h4>
      <p>computer:{{ count }} ✖ 2 = {{ plus }}</p>
      <p>computer:{{ count }} ✖ 2 = {{ plus }}</p>
      <p>computer:{{ count }} ✖ 2 = {{ plus }}</p>
    </div>

    <!-- methods中的函数无缓存，数字不变时也执行3次，性能不如computer -->
    <div class="box">
      <h4>使用 methods function</h4>
      <p>methods:{{ count }} ✖ 2 = {{ plusM() }}</p>
      <p>methods:{{ count }} ✖ 2 = {{ plusM() }}</p>
      <p>methods:{{ count }} ✖ 2 = {{ plusM() }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      count: 1,
    };
  },
  /*
    计算属性 必须定义在 computer 节点中
    计算属性必须是一个function，必须有返回值
    计算属性使用时必须当作普通属性来使用，不能加()
    计算属性中不应该改变 data 中的变量值（会报错：Unexpected side effect in "plus" computed property）
  */
  computed: {
    /* 
      从 computed 读取三遍，只计算一次，后两次从缓存中读取，性能较高
      如果记住状态了，比如淘宝购物车，再次渲染页面的时候也直接从computer读取缓存，
      methods则要重新计算，尤其是数据量大的时候，computed可以节省大量性能
      如果你不希望有缓存，请用 method 来替代
      computed VS watch: https://segmentfault.com/a/1190000021029299?utm_source=tag-newest
    */ 
    plus() {
      console.log("计算属性执行了");
      return this.count * 2;
    },
  },
  methods: {
    // 调用三遍，执行三遍，计算三遍，性能较低
    plusM() {
      console.log("方法执行了");
      return this.count * 2;
    },
  },
};
</script>

<style scoped>
.box {
  display: inline-block;
  border: 1px solid gray;
  margin: 10px;
  padding: 20px;
}
</style>
